<template>
  <div>
    <div class="header">
      <div class="titleSub">
        <img src="../../assets/image/返回@2x.png" class="img1" alt="" />
        <img src="../../assets/image/幸运锦鲤@2x.png" class="img2" alt="" />
        <div class="right">
          <img src="../../assets/image/分享@2x.png" alt="" />
          <img src="../../assets/image/加载@2x.png" alt="" />
          <img src="../../assets/image/提醒@2x.png" alt="" />
        </div>
      </div>
      <div class="fastNav">
        <div class="left">
          <div class="other">
            <img src="../../assets/image/公益.png" alt="" />
            <span class="num">1</span>
          </div>
          <img src="../../assets/image/攻略.png" alt="" />
          <img src="../../assets/image/幸运榜.png" alt="" />
        </div>
        <div class="right">
          <img src="../../assets/image/功德箱.png" alt="" />
          <img src="../../assets/image/捐赠记录.png" alt="" />
          <img src="../../assets/image/新建鱼塘.png" alt="" />
        </div>
      </div>
      <div class="yu">
        <img src="../../assets/image/鱼.png" alt="" />
      </div>
      <div class="jdBox">
        <img src="../../assets/image/进度-爱心@2x.png" alt="" />
        <div class="jd">
          <div class="jdTop">100/500</div>
          <div class="jdBtm">
            <span class="len" style="width: 50%"></span>
          </div>
        </div>
      </div>
      <div class="fenye">
        <img src="../../assets/image/arrow-left.png" alt="" />
        <span>1/2</span>
        <img src="../../assets/image/arrow-right.png" alt="" />
      </div>
      <div class="menu">
        <img src="../../assets/image/捐爱心@2x.png" alt="" />
        <img src="../../assets/image/购买饲料@2x.png" alt="" />
        <img src="../../assets/image/喂养@2x.png" alt="" class="ct" />
        <img src="../../assets/image/装饰鱼塘@2x.png" alt="" />
        <img src="../../assets/image/我的鱼塘@2x.png" alt="" />
      </div>
    </div>
    <div class="footer">
      <div class="title">
        <div class="left">
          <img src="../../assets/image/锦鲤成长属性@2x.png" alt="" />
          <span>锦鲤成长属性 </span>
        </div>
        <a href="javascript:;" class="right" @click="aa">更多动态></a>
      </div>
      <div class="echart">
        <div class="echart" id="echart-line"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    initChart(name, xData, yData) {
      let getchart = echarts.init(document.getElementById("echart-line"));
      var arr = [100, 100, 30, 60, 50, 60];
      var i = 0;
      var option = {
        radar: [
          {
            indicator: [
              { text: "财运亨通 ", max: 100 },
              { text: "桃花旺盛 ", max: 100 },
              { text: "学业有成 ", max: 100 },
              { text: "身体健康 ", max: 100 },
              { text: "事业成功 ", max: 100 },
              { text: "家庭美满  ", max: 100 },
            ],
            splitNumber: 4,
            center: ["50%", "50%"], //调整雷达图的位置
            radius: 100, //半径，可放大放小雷达图
            axisLine: {
              //坐标轴线相关设置
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "#fff", // 图表背景网格线的颜色
              },
            },
             splitArea: {
              areaStyle: {
                color: ["#fe2121","#fe3535","#fd5555","#fb6868",   ],
                opacity: 1,
              },
            },
            name: {
              rich: {
                a: {
                  color: "#333",
                },
                b: {
                  align: "center",
                  color: "#333",
                  borderRadius: 4,
                },
              },
              formatter: (a, b,c) => {
                i++
                return `{a|${a}}{b|${arr[i-1]}}`;
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            symbol: "none", //去掉拐点的圈
            data: [
              {
                value: [100, 100, 30, 60, 50, 60],
                name: "某软件",
                areaStyle: {
                  normal: {
                    color: "#f8c81b",
                  },
                },
                lineStyle: {
                  color: "rgba(255,255,255,0)",
                },
              },
            ],
          },
        ],
      };

      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },
    aa(){
      this.$router.push('/one')
    }
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 640px;
  height: 1120px;
  background: url("../../assets/image/bg.png");
  background-size: 640px 1120px;
  .titleSub {
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img1 {
      width: 55px;
      height: 45px;
    }
    .img2 {
      width: 260px;
      height: 80px;
    }
    .right {
      display: flex;
      width: 100px;
      justify-content: space-between;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .fastNav {
    padding: 30px 20px 0;
    display: flex;
    justify-content: space-between;
    img {
      width: 95px;
      height: 106px;
      display: block;
      margin-bottom: 25px;
    }
    .other {
      margin-bottom: 30px;
      width: 190px;
      height: 126px;
      position: relative;
      img {
        width: 190px;
        height: 126px;
        margin-bottom: 0;
      }
      .num {
        position: absolute;
        bottom: 15px;
        right: 35px;
        font-size: 20px;
        color: #fff;
      }
    }
  }
  .yu {
    width: 260px;
    height: 180px;
    margin: 0 auto;
    img {
      width: 260px;
      height: 180px;
    }
  }
  .jdBox {
    display: flex;
    margin-top: 0px;
    img {
      width: 80px;
      height: 80px;
      position: relative;
      z-index: 11;
      left: 20px;
    }
    .jd {
      .jdTop {
        background: #fff;
        width: 120px;
        height: 30px;
        border-radius: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        color: #666666;
        border-radius: 30px 30px 30px 0;
      }
      .jdBtm {
        width: 180px;
        height: 35px;
        background: #eeeeee;
        border: 4px solid #fff;
        border-radius: 35px;
        position: relative;
        .len {
          position: absolute;
          left: 2px;
          top: 2px;
          height: 31px;
          background: #f9c756;
        }
      }
    }
  }
  .fenye {
    width: 180px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
    span {
      font-size: 26px;
      color: #68391b;
    }
  }
  .menu {
    padding: 50px 20px 0;
    display: flex;
    justify-content: space-between;
    img {
      width: 90px;
      height: 100px;
      &.ct {
        width: 120px;
        height: 120px;
        position: relative;
        top: -25px;
      }
    }
  }
}
.footer {
  padding-bottom: 40px;
  .title {
    display: flex;
    padding: 30px;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
      }
      span {
        font-size: 24px;
        color: #000;
        font-weight: bold;
        margin-left: 10px;
      }
    }
    a {
      font-size: 20px;
      color: #666666;
    }
  }
  .echart {
    width: 580px;
    height: 500px;
    background: #f8f8f8;
    border-radius: 20px;
    margin: 20px auto 0;
    #echart-line {
      width: 580px;
      height: 480px;
    }
  }
}
</style>